<template>
  <div>
    <p>loacalStore 的使用</p>
    数据：{{localData?localData:"无"}}
    <el-button @click="loacalStoreFn('set')">loacalStore保存数据</el-button>
    <el-button @click="loacalStoreFn('get')">loacalStore获取数据</el-button>
    <el-button @click="loacalStoreFn('remove')">loacalStore移除数据</el-button>
    <el-button @click="loacalStoreFn('remove')">loacalStore清空数据</el-button>

    <hr/>
    <p>sessionStorage 的使用</p>
    数据：{{sessionData?sessionData:"无"}}
    <el-button @click="sessionStorageFn('set')">sessionStorage保存数据</el-button>
    <el-button @click="sessionStorageFn('get')">sessionStorage获取数据</el-button>
    <el-button @click="sessionStorageFn('remove')">sessionStorage移除数据</el-button>
    <el-button @click="sessionStorageFn('remove')">sessionStorage清空数据</el-button>

  </div>
</template>
<script>
export default {
  data() {
    return {
      types: {
        0: "set",
        1: "get",
        2: "remove",
        3: "clear"
      },
      sessionData: "",
      localData: "",
    };
  },
  methods: {
    loacalStoreFn(types) {
      if (this.types[0] == types) {
        localStorage.setItem("name", "老铁");
        console.log("保存成功");
      }
      if (this.types[1] == types) {
        let val = localStorage.getItem("name");
        console.log("获取数据：", val);
        this.localData = val
      }
      if (this.types[2] == types) {
        localStorage.removeItem('name')
        console.log("成功移除");
      }
      if (this.types[3] == types) {
        localStorage.clear()
        console.log("清空数据");
      }
      this.localData = localStorage.getItem("name")
    },
    sessionStorageFn(types){
        if (this.types[0] == types) {
        sessionStorage.setItem("name", "老铁");
        console.log("保存成功");
      }
      if (this.types[1] == types) {
        let val = sessionStorage.getItem("name");
        console.log("获取数据：", val);
       
        this.sessionData = val
      }
      if (this.types[2] == types) {
        sessionStorage.removeItem('name')
        console.log("成功移除");
      }
      if (this.types[3] == types) {
        sessionStorage.clear()
        console.log("清空数据");
      }
      this.sessionData = sessionStorage.getItem("name");
    }
  },
};
</script>